<template>
	<view class="content">
		<view class="album-wrap">
			<view class="image" v-for="(item, index) in list" :key="index">
				<image :class="[item.enabled == 0 ? 'reviewing' : '', item.enabled == 2 ? 'disabled' : '']" :src="item.filename" mode="aspectFill" @click="previewImage(index)"></image>
				<view class="delete" @click="deletePhoto(item, index)">
					<view class="uni-icon uni-icon-trash"></view>
				</view>
			</view>
			<view class="image">
				<view class="add" @click="upload">
					<view class="uni-icon uni-icon-plusempty"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import qiniuUploader from '@/common/qiniu/qiniu_wx.js';
	export default {
		data() {
			return {
				userInfo: {},
				form: {
					file: ''
				},
				qiniuToken: '',
				domain: '',
				progress: 0,
				files: [],
				list: [],
				page: 1,
			}
		},
		onLoad(options) {
			this.userInfo = JSON.parse(options.userinfo)
		},
		onReady() {
			this.getQiniuToken();
			this.getUserPhotos();
		},
		onNavigationBarButtonTap(e) {
			this.form.file = this.files.join();
			if (this.form.file == '') {
				uni.showToast({
					title: '请选择至少一张图片',
					position: 'bottom',
					icon: 'none'
				});
				return false;
			}
			uni.showLoading({
				title: '',
			});
			this.$api.api.ajaxData({
				method: 'V1.UserUpload',
				uid: this.userInfo.id,
				token: this.userInfo.token,
				type: '0',
				file: this.form.file,
			}, res => {
				uni.hideLoading();
				uni.showToast({
					title: res.msg,
					position: 'bottom',
					icon: 'none'
				});
				if (res.status) {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}
			}, err => {
				uni.hideLoading();
				uni.showToast({
					title: '网络错误，请稍后再试',
					position: 'bottom',
					icon: 'none'
				});
			})
		},
		onBackPress(e) {
			if (e.from === 'navigateBack') {
				return false;
			}
			if (this.files.length > 0) {
				uni.showModal({
					title: '提示',
					content: '您上传的照片未保存，确定退出吗？',
					success: res => {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				});
				return true;
			} else {
				return false;
			}
		},
		methods: {
			getQiniuToken: function () {
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.userInfo.id,
					token: this.userInfo.token,
				}, res => {
					if (res.status) {
						this.qiniuToken = res.data.token
						this.domain = res.data.domain
					}
				})
			},
			
			getUserPhotos: function () {
				this.$api.api.ajaxData({
					method: 'V1.UserPhotos',
					uid: this.userInfo.id,
					token: this.userInfo.token,
					page: this.page
				}, res => {
					if (res.status) {
						this.list = res.data
					}
				})
			},
			
			upload: function () {
				uni.chooseImage({
					count: 9,
					sourceType: ['camera', 'album'],
					sizeType: ['original', 'compressed'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let tempPaths = res.tempFilePaths[i].split('/');
							uni.showLoading({
								title: this.progress + '%'
							});
							qiniuUploader.upload(res.tempFilePaths[i], qiniu => {
								// console.log('11111111qiniu',qiniu)
								uni.hideLoading();
								this.files.push(tempPaths[tempPaths.length - 1])
								this.list.push({
									filename: res.tempFilePaths[i],
									enabled: 1,
								})
								
							}, err => {
								console.log('七牛上传失败', JSON.stringify(err));
							}, {
								region: 'SCN',
								domain: this.domain,
								key: tempPaths[tempPaths.length - 1],
								uptoken: this.qiniuToken,
							}, res => {
								this.progress = res.progress;
							}, () => {
								// 取消上传
							}, () => {
								// `before` 上传前执行的操作
							}, () => {
								// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
							});
						}
					}
				});
			},
			
			previewImage(index) {
				if (this.list.length > 0) {
					let imgList = []
					for (let i = 0; i < this.list.length; i++) {
						imgList.push(this.list[i].filename)
					}
					uni.previewImage({
						current: this.list[index].filename,
						urls: imgList,
						indicator: 'none',
						loop: false,
					});
				}
			},
			
			deletePhoto: function (item, index) {
				console.log(item)
				uni.showModal({
					title: '提示',
					content: '确定要删除此照片？',
					success: res => {
						if (res.confirm) {
							if (!!item.id) {
								this.$api.api.ajaxData({
									method: 'V1.UserPhotoDel',
									uid: this.userInfo.id,
									token: this.userInfo.token,
									id: item.id
								}, res1 => {
									uni.showToast({
										title: res1.msg,
										position: 'bottom',
										icon: 'none'
									});
									if (res1.status) {
										this.getUserPhotos();
									}
								})
							} else {
								this.files.splice(index, 1)
								this.list.splice(index, 1)
							}
						}
					}
				});
			},
			
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.album-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 10rpx;
		.image {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 365rpx;
			height: 365rpx;
			box-sizing: border-box;
			position: relative;
			image {
				width: 355rpx;
				height: 355rpx;
				border-radius: 20rpx;
				position: relative;
				&.reviewing::after {
					content: '审核中……';
					display: block;
					width: 355rpx;
					height: 355rpx;
					text-align: center;
					line-height: 355rpx;
					font-size: 36rpx;
					color: #fff;
					background-color: rgba(0,0,0,0.7);
					border-radius: 20rpx;
					position: absolute;
					left: 0;
					top: 0;
				}
				&.disabled::after {
					content: '审核不通过';
					display: block;
					width: 355rpx;
					height: 355rpx;
					text-align: center;
					line-height: 355rpx;
					font-size: 36rpx;
					color: #fff;
					background-color: rgba(0,0,0,0.9);
					border-radius: 20rpx;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
			.delete {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60rpx;
				height: 60rpx;
				background-color: rgba(0,0,0,0.6);
				border-radius: 60rpx;
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				.uni-icon {
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}
		}
		.add {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 353rpx;
			height: 353rpx;
			border: 1rpx solid #ddd;
			border-radius: 20rpx;
			.uni-icon {
				font-size: 160rpx;
				color: #ddd;
			}
		}
	}
</style>
